<template>
  <div class="app-container">
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="盘库任务号">
        <el-autocomplete
          ref="checkNoRef"
          v-model="form.checkNo"
          :fetch-suggestions="querySearchCheckNo"
          :trigger-on-focus="false"
          clearable
          @select="handleSelectCheckNo"
          @clear="clickClearCheckNo"/>
      </el-form-item>
      <el-form-item label="盘库发起人">
        <el-select v-model="form.createId" filterable>
          <el-option
            v-for="item in creatorOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-select v-model="form.warehouseId" filterable>
          <el-option
            v-for="item in warehouseOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="盘库时间" class="long-content">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>
      <div class="btns">
        <el-button type="primary" @click="onAdd">发起盘库</el-button>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px"
      show-overflow-tooltip>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="checkNo"
        label="器材分类">
      </el-table-column>
      <el-table-column
        prop="warehouseName"
        label="仓库">
      </el-table-column>
      <el-table-column
        prop="createName"
        label="发起人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发起时间">
      </el-table-column>
      <el-table-column
        prop="operName"
        label="操作人">
      </el-table-column>
      <el-table-column
        prop="operTime"
        label="操作时间">
      </el-table-column>
      <el-table-column
        prop="checkTime"
        label="盘库时间">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope='scope'>
          <el-button type="danger" v-if="scope.row.status==0" @click="handleOperateClick(scope.row,'处理盘库异常')">处理盘库异常
          </el-button>
          <el-button type="primary" v-if="scope.row.status==1" @click="handleOperateClick(scope.row,'查看详情')">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      v-if="dialogVisible"
      :visible.sync="dialogVisible">
      <el-form ref="ruleForm" inline :model="dataForm" :rules="$rules.inventoryRules" label-width="100px">
        <el-form-item label="盘库任务号" prop="checkNo">
          <el-input v-model="dataForm.checkNo" style="width: 250px" disabled placeholder="请输入盘库任务号"></el-input>
        </el-form-item>
        <el-form-item label="盘库发起人" prop="creator">
          <el-input
            v-model="dataForm.creator"
            style="width: 250px"
            disabled
            placeholder="请输入盘库发起人"></el-input>
        </el-form-item>
        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="dataForm.warehouseId"
            style="width: 250px"
            :disabled="dialogTitle=='盘库详情'"
            filterable
            placeholder="请选择仓库">
            <el-option
              v-for="item in warehouseOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="盘库时间" prop="checkTime">
          <el-date-picker
            v-model="dataForm.checkTime"
            :disabled="dialogTitle=='盘库详情'"
            type="date"
            style="width: 250px !important;"
            value-format="yyyy-MM-dd"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="盘库说明">
          <el-input
            type="textarea"
            :disabled="dialogTitle=='盘库详情'"
            style="width: 250px"
            :rows="4"
            v-model="dataForm.checkExplain"
            placeholder="请输入盘库说明"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
            <el-button type="primary" v-if="dialogTitle=='发起盘库'" @click="saveData()">确定发起</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import { addInventory, getInventoryNo, getExceptionList } from '@/api/inventory'
import {
  getName
} from '@/utils/auth'
import { getWarehouse } from '@/api/warehouse'

export default {
  name: 'ExceptionHandle',
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      form: {
        date: '',
        warehouseId: '',
        beginTime: '',
        endTime: '',
        createId: '',
        checkNo: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      creatorOptions: [],
      tableData: [],
      dialogVisible: false,
      dialogTitle: '发起盘库',
      warehouseOptions: [],
      dataForm: {}
    }
  },
  created() {
    this.onQuery()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    handleOperateClick(row, tag) {
      if (tag == '查看详情') {
        this.dialogTitle = '盘库详情'
        getWarehouse({}).then(res => {
          this.warehouseOptions = res.resultData
          this.dataForm = {
            checkTime: row.checkTime,
            checkNo: row.checkNo,
            checkExplain: row.checkExplain,
            warehouseId: row.warehouseId,
            id: row.id,
            creator: row.createName
          }
          this.dialogVisible = true
        })
      } else {
      }
    },
    /**
     * 模糊查询盘库任务号
     * @param queryString
     * @param cb
     */
    querySearchCheckNo: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    /**
     * 选择盘库任务号
     * @param item
     */
    handleSelectCheckNo(item) {
      // console.log(item)
    },
    clickClearCheckNo(){
      this.$nextTick(() => {
        if (this.$refs.checkNoRef) {
          this.$refs.checkNoRef.activated = true;
        }
      });
    },
    getTableData() {
      const param = { page: this.currentPage, rows: this.pageSize }
      Object.assign(param, this.form)
      if (this.form.date && this.form.date[0]) {
        param.beginTime = this.form.date[0]
      } else {
        param.beginTime = ''
      }
      if (this.form.date && this.form.date[1]) {
        param.endTime = this.form.date[1]
      } else {
        param.endTime = ''
      }
      getExceptionList(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
      })
    },
    saveData() {
      const _this = this
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          addInventory(_this.dataForm).then(response => {
            if (response.success) {
              _this.$message({
                message: '新增成功',
                type: 'success'
              })
              _this.dialogVisible = false
              _this.onQuery()
            }
          })
        } else {
          return false
        }
      })
    },
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    },
    onAdd() {
      const b = new Promise(resolve => {
        getWarehouse({}).then(res => {
          resolve(res.resultData)
        })
      })
      const a = new Promise(resolve => {
        getInventoryNo({}).then(res => {
          resolve(res.resultData)
        })
      })
      Promise.all([a, b]).then(res => {
        this.warehouseOptions = res[1]
        this.dataForm = {
          checkTime: '',
          checkNo: res[0],
          checkExplain: '',
          warehouseId: '',
          creator: getName()
        }
        this.dialogTitle = '发起盘库'
        this.dialogVisible = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>

